<template>
	<swiper :indicator-dots="false" class="package-var-list" @change="changeSwiper" :style="{height: swiperHeight + 'px'}">
		<swiper-item class="package-var-item-box" v-for="(data,index) in list" :key="index" @click="goPackageInfo(data.goods_type,data.goods_id)">
			<view :class="['package-var-item package-var-item-'+index]">
				<image mode="widthFix" :src="data.shelf_image || data.image" class="mainImg" @load="imgLoad($event,index)"></image>
				<view class="package-var-item-bot">
					<view class="package-var-item-bot-info">
						<view class="package-var-item-bot-info-tit">{{data.goods_name}}</view>
						<view class="package-var-item-bot-info-price">
							<block v-if="isLogin">
								<text class="orange">￥</text>
								<text class="orange price">{{data.retail_price}}</text>
							</block>
							<pt-noLogin v-else margin="0 20rpx 0 0"></pt-noLogin>
							{{data.remark}}
							<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/index/arrow.png"></image>
						</view>
					</view>
					<view class="package-var-item-bot-info-arrow" v-if="data.vr_url">
						VR<image mode="widthFix" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/index/arrow-white.png"></image>
					</view>
				</view>
			</view>
		</swiper-item>
	</swiper>
	<!-- <scroll-view scroll-x class="package-var-scroll-view">
		<view class="package-var-list">
			<view class="package-var-item" v-for="(data,index) in list" :key="index" @click="goPackageInfo(data.goods_type,data.goods_id)">
				<image mode="widthFix" :src="data.shelf_image || data.image" class="mainImg"></image>
				<view class="package-var-item-bot">
					<view class="package-var-item-bot-info">
						<view class="package-var-item-bot-info-tit">{{data.goods_name}}</view>
						<view class="package-var-item-bot-info-price">
							<text class="orange">￥</text>
							<text class="orange price">{{data.retail_price}}</text>
							{{data.remark}}
							<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/index/arrow.png"></image>
						</view>
					</view>
					<view class="package-var-item-bot-info-arrow" v-if="data.vr_url">
						VR<image mode="widthFix" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/index/arrow-white.png"></image>
					</view>
				</view>
			</view>
		</view>
	</scroll-view> -->
</template>

<script>
	export default {
		props: {
			isLogin: {
				type: Boolean,
				default: false
			},
			list: {
				type: Array,
				default () {
					return []
				}
			}
		},
		data() {
			return {
				swiperHeight: 0
			};
		},
		methods: {
			goPackageInfo(group_type,group_id){
				switch (Number(group_type)){
					case 2:
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/package/house-info?group_id='+group_id
						})
						break;
					case 3:
						uni.navigateTo({
							animationDuration: 500,
							url: '/pages/package/n98-info?group_id='+group_id
						})
						break;
					case 11:
						uni.navigateTo({
							animationDuration: 500,
							url: '/special-package/info/info?group_id='+group_id
						})
						break;
				}
				this.$emit('addFoot')
			},
			changeSwiper(e){
				uni.createSelectorQuery().in(this).select('.package-var-item-'+e.detail.current).boundingClientRect(navbarRes => {
					this.swiperHeight = navbarRes.height + 30
				}).exec()
			},
			imgLoad(e,index){
				if(index==0){
					this.$nextTick(() => {
						uni.createSelectorQuery().in(this).select('.package-var-item-0').boundingClientRect(navbarRes => {
							this.swiperHeight = navbarRes.height + 30
						}).exec()
					})
				}
			}
		},
		mounted() {
			
		}
	}
</script>

<style lang="scss">
	.package-var-list{
		white-space: nowrap;
	}
	.package-var-item-box{
		padding: 0 30rpx;
		box-sizing: border-box;
	}
	.package-var-scroll-view{
		white-space: nowrap;
	}
	.package-var-item{
		display: inline-block;
		width: 100%;
		border-radius: 16rpx;
		margin-right: 30rpx;
		box-shadow: 0rpx 20rpx 40rpx 0 rgba(40,34,31,0.05);
	}
	.mainImg{
		width: 100%;
		border-radius: 16rpx 16rpx 0 0;
	}
	.package-var-item-bot{
		display: flex;
		align-items: center;
		padding: 30rpx;
	}
	.package-var-item-bot-info{
		flex: 1;
		min-width: 0;
		margin-right: 30rpx;
	}
	.package-var-item-bot-info-tit{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 32rpx;
		color: #222;
	}
	.package-var-item-bot-info-price{
		font-size: 22rpx;
		color: #666260;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		font-family: 'din';
		.orange{
			color: #F59359;
		}
		.price{
			font-size: 28rpx;
			margin-right: 20rpx;
		}
		image{
			width: 16rpx;
			height: 16rpx;
			margin-left: 10rpx;
			vertical-align: top;
		}
	}
	.package-var-item-bot-info-arrow{
		height: 52rpx;
		line-height: 52rpx;
		background-color: #F59359;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: #FFF;
		border-radius: 8rpx;
		display: flex;
		align-items: center;
	}
	.package-var-item-bot-info-arrow image{
		width: 16rpx;
		height: 22rpx;
		margin-left: 10rpx;
	}
</style>
